import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/foundation.dart' show kDebugMode;
import 'package:flutter/material.dart';

/* 
  坑点:
    直接使用网络图片可能会报错
    Access to XMLHttpRequest at 'https://smart-shop.itheima.net/uploads/10001/20230320/6d239000de9c3f12aafa571349b63d22.jpg(图片地址)' from origin 'http://localhost:57572(本地开发服务器)' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
    解决方法:
      1. 在(自己电脑放 Flutter SDK 的位置) flutter/packages/flutter_tools/lib/src/web/chrome.dart 文件中, 
         找到 // Chrome launch. 注释 在下方添加: '--disable-web-security',
      2. 在 flutter/bin/cache 目录下找到 flutter_tools.snapshot 和 flutter_tools.stamp 文件, 删除掉
      3. win+R 输入 cmd 打开命令行窗口, 执行 flutter doctor 命令 
      4. 重新运行项目
 */

class File09HomeSwiper extends StatelessWidget {
  const File09HomeSwiper({super.key, this.swiperList = const []});

  final List swiperList;

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      items:
          swiperList
              .map(
                // (item) => Image.network(item['imgUrl']),
                (item) => GestureDetector(
                  // 点击操作
                  onTap: () {
                    if (kDebugMode) {
                      debugPrint('点击了, id:${item['imgName']}');
                    }
                  },
                  child: Container(
                    margin: const EdgeInsets.only(top: 10),
                    clipBehavior: Clip.none,
                    child: Image.network(item['imgUrl'], fit: BoxFit.cover),
                  ),
                ),
              )
              .toList(),
      options: CarouselOptions(
        // viewportFraction: 1, // 缩放比例, 1 表示不缩放
        autoPlay: true, // 自动播放
        autoPlayInterval: const Duration(seconds: 4), // 自动播放间隔
        // aspectRatio: 750 / 369, // 图片宽高比
        height: 150,
      ),
    );
  }
}
